<template>
    <div class="home">
        <div class="home-header">
            <span class="home-log">
                <img src="../assets/logo.png" alt="" @click="homemenuwidth=!homemenuwidth">
                <span>电商后台管理系统</span>
            </span>
            <el-button type="info" @click="secede" >注销</el-button>
        </div>
        <div class="home-w"> 
                <div class="home-menu" ref="homemenu" >
                    <div class="menu-bt" @click="menusize" >|||</div>
                    <homeMenu :collapse="collapse" ></homeMenu>
                </div>
            
            <div class="home-index">
                <homeIndex></homeIndex>
            </div>
        </div>
        
    </div>
</template>

<script>
import homeMenu from '../components/homeMenu';
import homeIndex from '../components/homeIndex';
// 引入gsap
import { gsap } from "gsap"
export default {
    name: 'Home',
    data() {
        return {
            // 侧边栏的展开和缩小
            homemenuwidth: true,
            // 侧边栏是否以缩小形式展现
            collapse:false,
            // 动画
            at:null,
            unfold:null,
            close:null
        };
    },
    methods: {
        //退出登录
        secede() {
            sessionStorage.clear()
            this.$router.push('/login')
        },
        // 侧边栏的展开和缩小函数
        // 方式一
        // menusize(){ 
        //     let animate=() => {
        //         if (this.homemenuwidth) {
        //             console.log('点击成功了200');          
        //             if (this.$refs.homemenu.offsetWidth <200) {
        //                 this.$refs.homemenu.style.width = this.$refs.homemenu.offsetWidth +(220-this.$refs.homemenu.offsetWidth)/10 + 'px'
        //                 this.at = requestAnimationFrame(animate)
        //                 console.log("在200循环内加")
        //             }
        //             else{cancelAnimationFrame(this.at)}
        //         }
        //         else{
        //             console.log('点击成功了64');
        //             if (this.$refs.homemenu.offsetWidth >64) {
        //                 this.$refs.homemenu.style.width = this.$refs.homemenu.offsetWidth -(this.$refs.homemenu.offsetWidth-50)/10 + 'px'

        //                 this.at = requestAnimationFrame(animate)
        //                 console.log("在64循环内加")
        //             }else{cancelAnimationFrame(this.at)}
        //         }
        //         console.log(this.$refs.homemenu.offsetWidth)     
        //     }
        //     this.collapse = !this.collapse
        //     this.homemenuwidth=!this.homemenuwidth
        //     // 首先停止动画
        //     cancelAnimationFrame(this.at)
        //     requestAnimationFrame(animate)
        //     console.log(this.homemenuwidth,this.collapse);
        // },
        // 方式二
        menusize(){        
                this.homemenuwidth=!this.homemenuwidth         
                if (this.homemenuwidth) {//展开
                    this.collapse = false
                    console.log('展开了啊')
                    gsap.to(".home-menu", {  duration: 0.5,width:'200px',ease: "power1.inOut"})
                    // console.log('点击成功了200')     
                    
                    gsap.to(".el-submenu__icon-arrow", {  duration: 0.5,opacity:0,ease: "power1.out"})
                }
                else{//缩小
                    // console.log('点击成功了64').el-submenu__icon-arrow
                    gsap.to(".home-menu", {  
                    duration: 0.5,
                    width:'64px',
                    ease: "power1.inOut",
                    onComplete: () => {
                        if(!this.homemenuwidth){
                            this.collapse = true
                            console.log('缩小函数回调执行了')
                        }
                        
                    }
                })
                    gsap.to(".el-submenu__icon-arrow", {  duration: 0.3,opacity:0,ease: "power1.out",})

                }
                // console.log(this.$refs.homemenu.offsetWidth)     
            
        },
        
    },
    components:{
        homeMenu,
        homeIndex
    }
}
</script>

<style scoped>
.home{
    min-width: 1000px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: aquamarine;
    overflow:hidden;
}
.home-header {
    width: 100%;
    height: 70px;
    background-color: #373d41;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 15px;
    box-sizing: border-box;
}
.home-log{
    display: flex;
    align-items: center; 
}
.home-log span{
    color: white;
    font-size: 20px;   
    padding-left: 10px; 
}
.home-header img{
    width: 50px;
    height: 50px;
}
.home-w{
    width: 100%;    
    /* height: 585px; */
    display: flex;
    justify-content: space-between;
    flex: 1;
}
.home-menu{
    width: 200px;
    /* min-height: 100%; */
    background-color: #333744;
    /* flex-grow:1; */
    flex-shrink:0;
    /* display: none; */
    height: 100%;
    overflow: hidden;
}
.home-index{
    height: 100%;
    background-color: #eaedf1;
    flex:1;
    overflow: hidden;
}
.menu-bt{
  width: 100%;
  height: 25px;
  background-color: #4a5064;
  text-align: center;
  padding: 3px;
  box-sizing: border-box;
  letter-spacing:2px;
  color: white;
  cursor:pointer;
  line-height: 16px;
  /* 禁止文字被选中 */
  user-select: none;
}
</style>